<template>
  <BasicModal
    @register="register"
    :width="1080"
    title="消息详情"
    :showOkBtn="false"
    cancelText="关闭"
  >
    <div class="message-info">
      <div class="message-info-title">
        <h3>{{ messageInfo?.title }}</h3>
      </div>
      <div class="message-info-property">
        <a-avatar v-if="messageInfo?.avatar" :src="messageInfo?.avatar" />
        <a-avatar v-if="!messageInfo?.avatar">
          {{ messageInfo?.nickname?.substring(0, 1) }}
        </a-avatar>
        {{ messageInfo?.nickname }}

        <a-divider type="vertical" />
        {{
          messageInfo?.sendDate ? dayjs(messageInfo?.sendDate).format('YYYY-MM-DD HH:mm') : '草稿'
        }}
      </div>
      <a-divider />
      <div class="message-info-content" v-html="messageInfo?.content"></div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { SysMessage } from '@/api/sys/model/sysMessageModel';
  import { useGlobSetting } from '@/hooks/setting';
  import dayjs from 'dayjs';

  export default defineComponent({
    components: { BasicModal },
    setup() {
      const globSetting = useGlobSetting();
      const apiUrl = ref(globSetting.apiUrl);

      const messageInfo = ref<Nullable<SysMessage>>();

      const [register, { setModalProps }] = useModalInner((data) => {
        setModalProps({ title: data.title });
        messageInfo.value = data;
      });

      return {
        dayjs,
        apiUrl,
        register,
        messageInfo,
      };
    },
  });
</script>
<style lang="less">
  .message-info {
    .message-info-title {
      font-size: 28px;
      font-weight: bold;
      text-align: center;
    }

    .message-info-property {
      text-align: center;
    }

    .message-info-content {
      padding: 0 16px;
      .editor-media {
        display: inline-block;
      }
    }
  }
</style>
